/*  实现步骤：(1)点击时盒子的位置 + (2)移动的距离 = (3)移动后的位置 
    步骤详解：
    (1)直接用.offsetLeft获取
    (2)用原鼠标的坐标 - 移动后的鼠标坐标 = 移动的距离
    (3)用原盒子的位置 + 移动的距离 = 移动后的位置
*/

var drag = document.querySelector('.drag')

// 点击盒子触发
drag.onmousedown = function (e) {
    //点击时盒子的坐标
    var boxX = this.offsetLeft;
    var boxY = this.offsetTop;
    //点击时鼠标的坐标
    var mouseX = e.clientX;
    var mouseY = e.clientY;
    // 点着移动时获取 移动后的鼠标坐标
    document.onmousemove = function (e) {
        // 点击时鼠标的坐标-移动后的鼠标坐标 = 移动的距离
        var moveX = e.clientX - mouseX;
        var moveY = e.clientY - mouseY;
        // 原位置 + 移动的距离 = 移动后的位置
        drag.style.left = boxX + moveX + "px";
        drag.style.top = boxY + moveY + "px";
    }
}
// 松开为空，不然一直黏在鼠标上
document.onmouseup = function () {
    document.onmousemove = null;
}
